<template>
  <ul class="detail-bottom">
    <li class="bottom-top" @click="selectaAllMusic">
      <div class="bottom-icon"></div>
      <div class="bottom-title">播放全部</div>
    </li>
    <li v-for="i in tracks" :key="i.id" @click="showNormalPlayer(i.id)">
      <h3>{{ i.name }}</h3>
      <p>{{ i.al.name }} - {{ i.ar[0].name }}</p>
    </li>
  </ul>
</template>

<script>
// 导入mapActions
import { mapActions } from 'vuex'
export default {
  name: 'DetailBottom',
  props: {
    // 所有歌曲
    tracks: {
      type: Array,
      default: () => [],
      require: true
    }
  },
  methods: {
    // 在方法里映射
    ...mapActions(['setFullScreen', 'setMiniPlayer', 'setIsPlaying', 'setSongDetail']),
    // 点击歌曲显示默认播放页面
    showNormalPlayer (id) {
      // 通过dispatch传递参数给actionss
      // this.$store.dispatch('setFullScreen', true)
      // 触发的时候直接点触发
      this.setFullScreen(true)
      this.setIsPlaying(true)
      this.setMiniPlayer(false)
      this.setSongDetail([id])
    },
    // 播放全部
    selectaAllMusic () {
      // 显示播放页面
      this.setFullScreen(true)
      // 获取所有歌曲的id
      const ids = this.tracks.map(item => item.id)
      console.log(ids)
      this.setSongDetail(ids)
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/css/mixin.scss";
@import "@/assets/css/variable.scss";
.detail-bottom {
  width: 100%;
  // height: 100%;
  li {
    width: 100%;
    height: 120px;
    padding: 20px;
    box-sizing: border-box;
    border-bottom: 1px solid #ccc;
    @include bg_sub_color();
  }
  .bottom-top {
    display: flex;
    align-items: center;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    .bottom-icon {
      width: 60px;
      height: 60px;
      @include bg_img("../assets/images/small_play");
      margin-right: 20px;
    }
    .bottom-title {
      @include font_size($font_large);
      @include font_color();
    }
  }
  h3 {
    @include font_size($font_medium);
    @include font_color();
  }
  p {
    @include font_size($font_samll);
    @include font_color();
    margin-top: 10px;
  }
}
</style>
